<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="">
		<cover-view class="PageLoading" @click.stop="" v-if="mode == 'cover'">
			<cover-view class="PageLoading-content">
				<cover-image class="pic" :src="imgPath + 'components/PageLoading/' + pic" mode=""></cover-image>
				<!-- <cover-view class="loader">
					<cover-view class="loading">
						<cover-view class="item" :ind="index" v-for="(item, index) in 8" :key="item">
							<cover-view class="dot"></cover-view>
						</cover-view>
					</cover-view>
				</cover-view> -->
				<cover-view class="tips">{{ tips }}</cover-view>
			</cover-view>
		</cover-view>
		<view class="PageLoading" @click.stop="" v-if="mode != 'cover'">
			<view class="PageLoading-content">
				<view class="loading">
					<view></view>
					<view></view>
				</view>
				<!-- <u-loading class="pic" :customStyle="{ width: '68%', height: '68%' }" mode="flower" color="#4be8b4"></u-loading> -->
				<view class="tips">{{ tips }}</view>
			</view>
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN -->
	<view class="PageLoading" @click.stop="">
		<view class="PageLoading-content" style="display: flex; justify-content: center; align-items: center">
			<!-- <image class="pic" :src="imgPath + 'components/PageLoading/' + pic" mode=""></image> -->
			<!-- <u-loading class="pic" color="red"></u-loading> -->
			<view class="loading">
				<view></view>
				<view></view>
			</view>
			<view class="tips">{{ tips }}</view>
		</view>
	</view>
	<!-- #endif -->
</template>

<script>
import { tools } from "../../utils/util";

export default {
	name: "PageLoading",
	props: {
		mode: {
			type: String,
			default: "cover"
		},
		tips: {
			type: String,
			default: "加载中，请稍后"
		},
		pic: {
			type: String,
			// default: "loading-page.gif"
			default: "65282234.gif"
		}
	},
	data() {
		return {
			imgPath: tools.imgPath
		};
	}
};
</script>

<style lang="scss">
.PageLoading {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.86);
	z-index: 99;
	top: 0;
	left: 0;

	@keyframes loading {
		50% {
			transform: scale(0.4);
			opacity: 0.3;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.PageLoading-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		--pic-size: 35vw;

		.pic {
			width: var(--pic-size);
			height: var(--pic-size);
			display: flex;
			margin-bottom: 5vw;
			justify-content: center;
			align-items: center;
		}

		.loader {
			--loading-size: 30vw;
			width: var(--loading-size);
			height: var(--loading-size);
			margin: 5vw auto;
			// border: 1px solid chocolate;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tips {
			font-size: 36rpx;
			// color: #4be8b4;
			color: #fff;
			font-weight: bold;
		}
	}
}

.loading,
.loading > view {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > view  {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
}

.loading > view {
  position: absolute;
  top: 50%;
  left: 50%;
  background: transparent;
  border-style: solid;
	border-color: #fff;
  border-width: 2px;
  border-radius: 100%;
  animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
}

.loading > view:first-child {
  position: absolute;
  width: 32px;
  height: 32px;
  border-right-color: transparent;
  border-left-color: transparent;
}

.loading > view:last-child {
  width: 16px;
  height: 16px;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation-duration: 0.5s;
  animation-direction: reverse;
}

@keyframes ball-clip-rotate-multiple-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>
